<template>
  <div style="position: relative">
    <el-popover placement="bottom-start" trigger="click">
      <el-tree :data="treeData" ref="menuListTree" style="height: 250px; width:240px; overflow-y: auto"
               @current-change="currentChangeHandle" :default-expand-all="true"
               :highlight-current="true" :expand-on-click-node="false">
      </el-tree>
      <el-input v-model="dataForm[attrName]" slot="reference" :clearable="clearable" :readonly="true"
                :placeholder="placeholder"
                class="menu-list__input"></el-input>
    </el-popover>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalTreeSelect',
  mixins: [basicMixins],
  data() {
    return {}
  },
  props: {
    /**
     * [
     *  {
     *    label: 'xxx',
     *    value: 'xxx',
     *    children: [
     *      {
     *        label: 'xxx',
     *        value: 'xxx'
     *      }
     *    ]
     *  }
     *
     * ]
     */
    treeData: {
      type: Array,
      default: () => []
    },
    selectCallback: {
      type: Function,
      default: () => {
      }
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    currentChangeHandle(data) {
      // 取 value，若没有取到则不做处理
      const {value} = data

      if (!this.R.isNil(value)) {
        this.dataForm[this.attrName] = value;
      }
    }
  }
}
</script>

<style scoped>

</style>
